import React from 'react';
import {GridList, GridTile} from 'material-ui/GridList';
import IconButton from 'material-ui/IconButton';
import StarBorder from 'material-ui/svg-icons/toggle/star-border';
import hostconfig from '../../config/hostconfig'
console.log(hostconfig)
const styles = {
    root: {
        display: 'flex',
        flexWrap: 'wrap',
        justifyContent: 'space-around',
    },
    gridList: {
        width: 500,
        height: 450,
        overflowY: 'auto',
        marginBottom: 24
    },
};

const tilesData = [
    {
        img: `http://${hostconfig.host}:${hostconfig.port}/src/images/m1.jpg`,
        title: 'Breakfast',
        author: 'jill111',
        featured: true,
    },
    {
        img: `http://${hostconfig.host}:${hostconfig.port}/src/images/m2.jpg`,
        title: 'Tasty burger',
        author: 'pashminu',
    },
    {
        img: `http://${hostconfig.host}:${hostconfig.port}/src/images/m3.jpg`,
        title: 'Camera',
        author: 'Danson67',
    },
    {
        img: `http://${hostconfig.host}:${hostconfig.port}/src/images/m4.jpg`,
        title: 'Morning',
        author: 'fancycrave1',
        featured: true,
    },
    {
        img:`http://${hostconfig.host}:${hostconfig.port}/src/images/m5.jpg`,
        title: 'Hats',
        author: 'Hans',
    },
    {
        img: `http://${hostconfig.host}:${hostconfig.port}/src/images/m6.jpg`,
        title: 'Honey',
        author: 'fancycravel'
    },
    {
        img: `http://${hostconfig.host}:${hostconfig.port}/src/images/m7.jpg`,
        title: 'Vegetables',
        author: 'jill111'
    },
    {
        img: `http://${hostconfig.host}:${hostconfig.port}/src/images/m8.jpg`,
        title: 'Water plant',
        author: 'BkrmadtyaKarki',
    },
];

const GridListExampleComplex = () => (
    <div style={styles.root}>
        <GridList
            cols={2}
            cellHeight={200}
            padding={1}
            style={styles.gridList}
        >
            {tilesData.map((tile) => (
                <GridTile
                    key={tile.img}
                    title={tile.title}
                    actionIcon={<IconButton><StarBorder color="white" /></IconButton>}
                    actionPosition="left"
                    titlePosition="top"
                    titleBackground="linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 70%,rgba(0,0,0,0) 100%)"
                    cols={tile.featured ? 2 : 1}
                    rows={tile.featured ? 2 : 1}
                >
                    <img src={tile.img} />
                </GridTile>
            ))}
        </GridList>
    </div>
);

export default GridListExampleComplex;